<script lang="ts">
	interface Props {
		title: string;
		content: string;
		okName: string;
		type: 'info' | 'success' | 'warning' | 'error';
		onCancel: () => void;
		onOk: () => void;
	}
	const props: Props = $props();
</script>

<dialog class="modal modal-open">
	<div class="modal-box flex-col space-y-4">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => props.onCancel()}>✕</button
		>
		<h3 class="text-lg font-bold text-{props.type}">{props.title}</h3>
		<p class="text-{props.type}">{props.content}</p>

		<div class="modal-action">
			<button class="btn" onclick={() => props.onCancel()}>取消</button>
			<button class="btn btn-{props.type}" onclick={() => props.onOk()}>{props.okName}</button>
		</div>
	</div>

	<div class="modal-backdrop">
		<!-- 用于预加载样式 -->
		<div class="btn-info btn-success btn-warning btn-error text-info text-warning text-error"></div>
		<button onclick={() => props.onCancel()}>close</button>
	</div>
</dialog>
